<template>
    <div id="pindao-top">
        <div id="pindao-top-box">
            <h2>最常访问</h2>
            <div class="pindao-top-nav">
                <ul>
                    <li class="pindao-top-li" v-for="(v) in this.$store.state.seach.zuijin" v-bind:key="v.id">
                        <img :src="v.img" alt="">
                        <span>{{v.name}}</span>
                    </li>
                    <li class="pindao-top-li">
                        <i>＋</i>
                        <span>发现更多</span>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "top",
        created () {
            //在页面加载时读取localStorage里的状态信息
            if (localStorage.getItem("data") ) {
                //replaceState替换数据 Object.assign合并对象
                this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("data"))))
            }
            //在页面刷新时将vuex里的信息保存到localStorage里
            window.addEventListener("beforeunload",()=>{
                localStorage.setItem("data",JSON.stringify(this.$store.state))
            })
        },
    }
</script>

<style lang="scss" scoped>
    #pindao-top {
        width: 100%;
        height: 1.22rem;
        border-top: 0.02rem solid #e4e4e4;
        padding: 0.1rem 0 0.08rem 0;

        #pindao-top-box {

            h2 {
                font-size: 0.14rem;
                line-height: 0.22rem;
                font-weight: normal;
                color: #7e7e7e;
                margin-left: 0.17rem;
            }

            .pindao-top-nav {

                ul {

                    /*隐藏滚动条开始*/
                    white-space: nowrap;
                    -webkit-overflow-scrolling: touch;
                    overflow-x: auto;
                    overflow-y: hidden;
                    overflow: -moz-scrollbars-none;
                    overflow: -moz-scrollbars-none;
                    /*隐藏滚动条结束*/

                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-top: 0.04rem;
                    margin-bottom: 0.08rem;

                   .pindao-top-li {
                        margin-right: 0.14rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-start;
                        align-items: center;

                       i{
                           width: 0.54rem;
                           height: 0.54rem;
                           font-size: 0.27rem;
                           line-height: 0.54rem;
                           text-align: center;
                           font-style: normal;
                           display: inline-block;
                           border:0.01rem dashed #7e7e7e;
                       }
                        img{
                            width:0.54rem;
                        }
                        span{
                            font-size: 0.14rem;
                            line-height: 0.22rem;
                        }
                    }
                    li:nth-of-type(1){
                        margin-left: 0.17rem;
                    }
                    li:nth-last-child(1){
                        padding-right: 0.14rem;
                    }
                }

                ul::-webkit-scrollbar{
                    display: none;
                }
            }
        }
    }


</style>